<template>
  <div>
    <h3>Teleport</h3>
    <button @click="open = true">提示</button>
    <teleport to='body'>
        <div v-show="open == true" class="model">
            <button @click="open = false">关闭</button>
        </div>
    </teleport>
  </div>
</template>

<script setup lang='ts' name="Teleport">
import { ref, reactive } from 'vue'
let open = ref(false)


</script>


<style lang='scss' scoped>
.model{
    position: fixed;
    top: 50%;
    left: 70%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 200px;
    background-color: gray;
    text-align: right;
}
</style>